import React, { Component } from 'react';
import { Form, Row, Col } from 'antd';
import { connect } from 'dva';
import { BaseInput, BaseRangePicker, BaseSelect, InquiryAreaButton } from '@/components';
import { ObjectType, getRangePickerTime } from '../../utils';
import { communicationStatus, modifyType as modifyTypes } from '@/const/risk';

const style = require('./form.less');

class SearchCondition extends Component<ObjectType, {}> {
  constructor(props: ObjectType) {
    super(props);
    this.state = {};
  }

  // 查询渲染表格的数据
  handleGetTableList = (condition: ObjectType, page = 1) => {
    const {
      dispatch,
      tableData: { pageSize },
    } = this.props;
    // eslint-disable-next-line no-restricted-syntax
    for (const attr in condition) {
      if (condition.hasOwnProperty(attr) && condition[attr] === undefined) {
        // eslint-disable-next-line no-param-reassign
        delete condition[attr];
      }
    }
    dispatch({
      type: 'communicationRecord/getUserCommunicationDataEffect',
      payload: {
        ...condition,
        page,
        size: pageSize,
      },
    });
    dispatch({
      type: 'communicationRecord/setFormAreaInfo',
      payload: condition,
    });

    dispatch({
      type: 'communicationRecord/setPageSize',
      payload: {
        pageSize,
        currentPage: page,
      },
    });
  };

  /**
   * 获取审核状态 获取选项的id或者id集合用逗号连接
   * @param selectItem 选中的文字
   * @param arr 渲染的数据，array
   * @param hasAll 数据里是否包含全部
   */
  getId = (selectItem: string | undefined, arr, hasAll: boolean) => {
    let id = '';
    if (selectItem) {
      if (selectItem === '全部' && !hasAll) {
        const ids = arr.map((val: ObjectType) => val.id);
        ids.shift();
        id = ids.join(',');
      } else {
        id = `${arr.filter((val: ObjectType) => val.text === selectItem)[0].id}`;
      }
    }
    return id;
  };

  // 点击表单区的查询
  handleSubmit = (e: ObjectType) => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields((err: null | ObjectType, values: ObjectType) => {
      if (!err) {
        const { status, username, modifyType, content } = values;
        const rangeTime = getRangePickerTime(values);

        // 查询用户风险名单
        const condition = {
          username,
          startDate: rangeTime[0], // 开始日期
          endDate: rangeTime[1], // 结束日期
          status: this.getId(status, communicationStatus, true), // 手机邮箱使用状态
          modifyType: this.getId(modifyType, modifyTypes, true), // 会员联系方式记录类型
          userType: 0,
          dateType: 1,
          content,
        };

        // 查询渲染表格的数据
        this.handleGetTableList(condition);

        dispatch({
          type: 'communicationRecord/setFormAreaInfo',
          payload: {
            ...condition,
          },
        });
      }
    });
  };

  handleResetCallBack = () => {
    const { dispatch } = this.props;
    const defaultQueryCondition = {
      username: '',
      startDate: getRangePickerTime()[0],
      endDate: getRangePickerTime()[1],
      status: -1, // 手机邮箱使用状态
      modifyType: -1, // 会员联系方式记录类型
      userType: 0,
      dateType: 1,
      content: '',
    };
    this.handleGetTableList(defaultQueryCondition);
    dispatch({
      type: 'communicationRecord/setFormAreaInfo',
      payload: {
        currentPage: 1,
      },
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;

    return (
      <Form className={style.searchConditionWrap} labelAlign="left" onSubmit={this.handleSubmit}>
        <Row gutter={12}>
          <Col span={8}>
            <BaseRangePicker
              getFieldDecorator={getFieldDecorator}
              id="select-date"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 28 }}
            />
          </Col>

          <Col span={4}>
            <BaseInput
              getFieldDecorator={getFieldDecorator}
              getFieldDecoratorId="username"
              label="账户名"
              labelCol={{ span: 7 }}
            />
          </Col>

          <Col span={3}>
            <BaseSelect
              label="记录类型"
              getFieldDecorator={getFieldDecorator}
              id="modifyType"
              optionsData={modifyTypes}
              OptionKeyAttr="id"
              OptionValueAttr="text"
              OptionTextAttr="text"
              initialValue="全部"
            />
          </Col>

          <Col span={5}>
            <BaseInput
              getFieldDecorator={getFieldDecorator}
              getFieldDecoratorId="content"
              label="手机号/邮箱"
              labelCol={{ span: 7 }}
            />
          </Col>
          <Col span={3}>
            <BaseSelect<>
              label="状态"
              getFieldDecorator={getFieldDecorator}
              id="status"
              optionsData={communicationStatus}
              OptionKeyAttr="id"
              OptionValueAttr="text"
              OptionTextAttr="text"
              initialValue="全部"
            />
          </Col>
        </Row>
        <Row>
          <InquiryAreaButton
            className={style.inquiryBtn}
            form={this.props.form}
            handleResetCallBack={this.handleResetCallBack}
          />
        </Row>
      </Form>
    );
  }
}

function mapStateToProps({
  communicationRecord: { formData, tableData },
}: {
  communicationRecord: ObjectType;
}) {
  return { formData, tableData };
}
export default connect(mapStateToProps)(Form.create()(SearchCondition));
